<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        html {
            height: 100%;
        }

        body {
            height: 100%;
            margin: 0;
            padding: 0;
        }
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=WYX4HzcvM0b7oKaNPyCzoDs9Z1GGRDyG"></script>
</head>

<body>
    <div id="container" style="width: 100%;height: 100%">
        <!-- 添加地图的容器 -->
    </div>
</body>
<script>
    // 创建一个容器实例
    var map = new BMap.Map('container')
    // 设置中心点的坐标
    var point = new BMap.Point(116.404, 39.915)
    // 初始化地图
    map.centerAndZoom(point, 15);
    // 添加控件
    map.addControl(new BMap.NavigationControl());
    map.addControl(new BMap.ScaleControl());
    map.addControl(new BMap.OverviewMapControl());
    // 设置一个出行方式：
    var driving = new BMap.DrivingRoute(map, {
        renderOptions: {
            map: map,
            autoViewport: true
        }
    });
    // 设置起点和终点
    driving.search("深圳", "天安门");
</script>

</html>